<!--
 * @Author: 曹捷
 * @Date: 2020-06-18 16:24:04
 * @LastEditors: 曹捷
 * @LastEditTime: 2020-12-03 10:22:03
 * @Description: 关注弹出层
--> 
<template>
  <uni-popup @change="change" ref="popup" type="bottom">
    <div class="obit-focus">
      <div class="obit-focus-title color-tips">
        <span @click="cancle" class="btn btn-middle-1 f-l">取消</span>
        {{title}}
        <span @click="select" class="btn btn-middle-2 f-r">确定</span>
      </div>
      <div class="flex-l-a">
        <span :class="{'check':checkIndex===index}" :key="index" @click="checkIndex=index" class="check-item"
          v-for="(item,index) in dataList">{{item[label]}}</span>
        <span class="check-item-bak"></span>
        <span class="check-item-bak"></span>
      </div>
      <!-- <checkbox-group @change="onKeyInput($event,'checkList')" class="flex-l-a checkbox">
      <label :key="index" v-for="(item,index) in dataList">
        <checkbox :checked="checkList.indexOf(item[keys]) !==-1" :value="item[keys]" />
        {{item[label]}}
      </label>
      </checkbox-group>-->
    </div>
    <!-- <obitFocus :dataList="focusList" @select="focusConfirm" keys="type" label="name" v-model="params.focus"></obitFocus> -->
  </uni-popup>
</template>

<script>
import utilMix from '@/app-modules/mixin/utilMix.js'
export default {
  mixins: [utilMix],
  props: {
    title: {
      type: String,
      default: '请选择',
    },
    visable: {
      type: Boolean,
    },
    value: {
      type: [Array, Number, String],
    },
    dataList: {
      type: Array,
    },
    keys: {
      type: String,
      default: 'key',
    },
    label: {
      type: String,
      default: 'label',
    },
  },
  watch: {
    visable (value) {
      if (value) {
        this.$refs.popup.open()
      } else {
        this.$refs.popup.close()
      }
    },
    dataList: {
      handler () {
        this.valueToIndex()
      },
      deep: true
    }
  },
  data () {
    return {
      checkIndex: -1,
    }
  },
  methods: {
    valueToIndex () {
      if (this.value) {
        this.dataList.forEach((element, index) => {
          if (element[this.keys] == this.value) {
            this.checkIndex = index
            this.$emit('update:lableName', element[this.label])
          }
        })
      } else {
        this.index = ''
      }
    },
    /**
     * 选择内容
     */
    select (item, index) {
      // this.$emit('input', this.checkList)
      let info = this.dataList[this.checkIndex]
      this.$emit('input', info[this.keys])
      this.$emit('update:lableName', info[this.label])
      this.$emit('select', info)
      this.cancle()
    },
    change (e) {
      if (!e.show) {
        this.$emit('update:visable', false)
      }
    },
    cancle () {
      this.$emit('update:visable', false)
    },
  },
  mounted () {
    this.valueToIndex()
  },
}
</script>

<style lang="scss">
.obit-focus {
  padding: 0 30rpx;
  height: 800rpx;
  background: #ffffff;
  .check-item {
    width: 200rpx;
    display: inline-block;
    margin: 20rpx 0;
    text-align: center;
    color: #96a0af;
    border: 2rpx solid #96a0af;
    padding: 10rpx 0rpx;
    border-radius: 10rpx;
    position: relative;
  }
  .check-item-bak {
    width: 200rpx;
    height: 0;
  }
  .check-item.check {
    color: #5ad3fd;
    border: 2rpx solid #5ad3fd;
  }
  .check-item.check::after {
    content: 'L';
    color: #5ad3fd;
    position: absolute;
    right: 10rpx;
    bottom: -10rpx;
    transform: rotateY(180deg) rotate(-45deg);
  }
  .uni-label-pointer {
    width: 29%;
    padding: 54rpx 0 16rpx 0;
  }
  .checkbox {
    padding-bottom: 40rpx;
  }
  .obit-focus-title {
    height: 122rpx;
    font-size: 32rpx;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #e1e1e1;
    .btn {
      height: 75rpx;
      line-height: 75rpx;
      padding: 0;
      width: 160rpx;
    }
  }
}
</style>